<script lang="ts" setup>
import { upload } from "@/api/github/github";

const default_urls = [
  'https://cdn.jsdelivr.net/gh/NingLiu1998/NdocsWeb@main/2023/8/8/2835de90-f935-42a0-b51f-93b5e9335fce.png',
  'https://cdn.jsdelivr.net/gh/NingLiu1998/NdocsWeb@main/2023/8/8/9f156626-e3f1-4f22-900b-18c0e1927009.png',
  'https://cdn.jsdelivr.net/gh/NingLiu1998/NdocsWeb@main/2023/8/8/5f4421c2-90a2-4398-bfd8-e28f92059e24.png',
  'https://cdn.jsdelivr.net/gh/NingLiu1998/NdocsWeb@main/2023/8/8/a568c170-ef84-4b7d-9db8-dc03ef69bd29.png',
]

const file = ref<HTMLInputElement>()
const fileList = reactive<string[]>([...default_urls])
const loading = ref(false)


interface GithubResult {
  filePath?: string
  [key: string]: any
}

const up = () => {
  const target = file.value
  if (!target?.files || !target?.files[0]) {
    console.log('file is null ')
    return
  }
  loading.value = true

  const f = target!.files[0]
  console.log('file', f)
  let fileReader = new FileReader()
  fileReader.readAsDataURL(f)
  fileReader.onload = () => {
    let base64 = fileReader.result as string
    base64 = base64.split(',')[1]
    upload(f.name, base64).then(res => {
      console.log('res', res)
      fileList.push((res as GithubResult).filePath as unknown as string)
    }).catch(e => {
      console.log(e)
    }).finally(() => {
      loading.value = false
    })
  }

}


</script>
<!-- mdi-weather-night -->
<template>
  <input type="file" ref="file" />
  <v-btn @click="up" :loading="loading">
    文件上传至Github
  </v-btn>
  <ul>
    <li v-for="(item) in fileList" :key="item">
      <a :href="item" target="_blank">
        <img :src="item" />
      </a>
    </li>
  </ul>
</template>
<style scoped>
img {
  width: 300px;
  height: 300px;
}

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  list-style: none;
  margin: 5px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}
</style>
